<template>
  <div class="card">
    <div class="card-title">
      {{title}}
      <svg-icon :icon-class="svgName" class-name="card-panel-icon" />
      <div class="more" v-if="more" @click="handleMore">更多</div>
    </div>
    <div class="card-content">
      <slot name="content" />
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "Card",
  components: {},
  props: {
    title: {
      type: String,
      immediate: true,
      require: false,
      default: () => ""
    },
    svgName: {
      type: String,
      immediate: true,
      require: false,
      default: () => ""
    },
    more:{
      type:Boolean,
      default: false
    }
  },
  methods:{
    handleMore(){
      this.$emit('handleMore')
    }
  }
};
</script>
  <style lang="scss" scoped>
.card {
  height: 100%;
  width: 100%;
  position: relative;
}

.card-title {
  height: 0.4875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.225rem;
  font-weight: 600;
  color: #000000;
  padding: 0.2rem;
  .more{
    cursor: pointer;
    color: rgb(64, 158, 255);
  }
}

.card-panel-icon {
//   float: left;
  font-size: 48px;
}

.card-content {
  background-color: #ffffff;
  height: calc(100% - 0.4875rem);
  width: 100%;
  padding: 0.2rem;
}
</style>
  